<style>
select { width: 200px; }
</style>
<link rel="stylesheet" type="text/css" href="/static/css/pass_strengh/pass_strengh.css" />
<script type="text/javascript" src='/static/js/password_strength_plugin.js'></script>

<script type="text/javascript">
$(function() {
		$("#id_birthdate").datepicker({
			//minDate: '-100Y',
			maxDate: '-18Y',
			dateFormat: 'dd/mm/yy',
			changeYear: true,
			showMonthAfterYear: true,
			yearRange: '1920:1992',
			//showOn: 'button',
			//buttonImage: 'images/calendar.gif',
			//buttonImageOnly: false
		});
	});
 $(document).ready(function(){
	//BASIC
	$(".password_test").passStrength({
		userid:	"#id_username"
		}); 
	$("#id_cpf").keypress(function(event) {
		// Backspace, tab, enter, end, home, left, right
		// We don't support the del key in Opera because del == . == 46.
		var controlKeys = [8, 9, 13, 35, 36, 37, 39];
		// IE doesn't support indexOf
		var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
		// Some browsers just don't raise events for control keys. Easy.
		// e.g. Safari backspace.
		if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
		  (48 <= event.which && event.which <= 57) || // Always 1 through 9
		  (48 == event.which && $(this).attr("value")) || // No 0 first digit
		  isControlKey) { // Opera assigns values for control keys.
		return;
		} else {
		event.preventDefault();
		}
	});
   $("#btn_registra").click(function(event){	   
		$.ajax({
		   contentType: 'application/json',
		   type: "POST",
		   url: "/register/",
		   dataType: 'json',
		   data: (function() {
						var parametros = {};
						var theForm = window.document.registraForm;
						var num_of_elements = theForm.length;
						//alert(num_of_elements);
						for (var i=0; i<num_of_elements; i++){
							var theElement = theForm.elements[i];
							var element_type = theElement.type;
							var element_name = theElement.name;
							var element_value = theElement.value;
							if(element_type=="radio"){
								if (theElement.checked==true){
									parametros[element_name]=element_value;
								}
							}else{
								parametros[element_name]=element_value;
								//alert(parametros[element_name]);
							}
						}
						
						//ultimo parametro pra adicionar. account_type
						parametros["account_type"]=account_type;
						parametros["price_subs"]=price;
						return parametros;
					})(),
		   success: function(resp) {
						var item = resp;						
						var i = 0;
						
						//limpa antes
						var theForm = window.document.registraForm;
						var num_of_elements = theForm.length;
						for (var j=0; j<num_of_elements; j++){
							var theElement = theForm.elements[j];
							var	theElement_erroDiv = $("#"+theElement.name+"_erro");
							if (theElement_erroDiv!=null){
								$("#"+theElement.name+"_erro").html("");
								//alert(theElement.name);
							}
						}
						
					
						for (key in item){
								if (key=="success"){
									//location.href = '/login' //redireciona pra pagina completa
									$.ajax({
									   contentType: 'application/html',
									   type: "POST",
									   url: "/login/",
									   dataType: 'html',
									   success: function(resp) {
													var html_source = resp;	
													//alert(html_source);
													$("#middle_content").html("<div class=\"main-content\">"+html_source+"</div>");
													//return;	
												},
										error: function() {alert('Erro!');},
									 });									
									//$("#sucesso_dialog").show("slow");
									$(function() {
										$("#sucesso_dialog").dialog({
											position: 'center',
											modal: true,
											resizable: false,
											height: 170,
											buttons: {
												Ok: function() {
													$(this).dialog('close');
												}
											}
										});
									});
									//$("#sucesso_dialog" ).dialog( "option", "position", $("#sucesso_dialog").dialog('option','position') );
									return;
								}								
								//alert(item[key]);
								var	theElement_erroDiv = $("#"+key+"_erro");
								if (theElement_erroDiv!=null){
									$("#"+key+"_erro").html("<ul class='errorlist' style='color:red;'>"+String(item[key])+"</ul>");
								}
								i++;
							}
						
					},
			error: function() {
				// Prompt for user data and process the result using a callback:
				//alert('Falha de conexao com o servidor.');
				$("#erro_dialog").dialog({ position: 'center',
											resizable: false });
			},
		 });
   });
 });
</script>
<div id="erro_dialog" title="Erro" style="display: none; ">
<p>Falha na conexao com o servidor.</p>
</div>
<div id="sucesso_dialog" title="Sucesso" style="display: none;">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 
<span style="padding-top:10px; font-size:16px;font:Verdana, Geneva, sans-serif;">Seu registro foi feito com sucesso.<br/>
Verifique o seu email para ativar sua conta.
</span>
</p>
</div>
  
<!-- Pagetitle -->
<h1 class="pagetitle">Registro de nova conta:</h1> 
 
<div class="column1-unit"> 
<div class="contactform"> 
<form action="" method="post" id="registraForm" name="registraForm">
<fieldset><legend>&nbsp;*Dados Obrigatórios:&nbsp;</legend> 
         
        <div class="fieldWrapper"> 
            
            <div id="username_erro"></div> 
            <p>
              <label class="left" for="username"><span id="fancy" title="O nome de usuário colocado aqui será usado também para acessar o seu CS. Escolha com cuidado."><span class="obrigatorio">*Usuário</span></span></label> 
            <input id="id_username" type="text" class="field" name="username" maxlength="15" />
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="email_erro"></div> 
            <p>
              <label class="left" for="email"><span id="fancy" title="O endereço de email escolhido será validado."><span class="obrigatorio">*E-mail</span></span></label> 
            <input id="id_email" type="text" class="field" name="email" maxlength="75" />
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="password1_erro"></div> 
            <p>
              <label class="left" for="password1"><span id="fancy" title="A senha escolhida aqui será a senha de acesso ao CS."><span class="obrigatorio">*Senha</span></span></label> 
            <input id="id_password1" type="password" name="password1" class="password_test" style="float:left;" MAXLENGTH=8 />
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="password2_erro"></div> 
            <p>
              <label class="left" for="password2"><span id="fancy" title="A senha escolhida aqui será a senha de acesso ao CS."><span class="obrigatorio">*Senha (novamente)</span></span></label> 
            <input id="id_password2" type="password" class="password_repeat" name="password2" style="float:left;" MAXLENGTH=8 /> 
            </p> 
        </div>
		    
</fieldset>
<fieldset><legend>&nbsp;Serviço:&nbsp;</legend>

        <div class="fieldWrapper"> 
            
          <div id="service_type_erro"></div> 
            <p>
            <ul> 
<li><label for="id_service_type_0"><input type="radio"  onClick="setPrice(2500)" id="id_service_type_0" value="ceu" name="service_type" checked /> Céu - IntelSat 43W (R$25,00)&nbsp;&nbsp;&nbsp;<span id="fancy" title="Céu: - IntelSat 43W."><a href="http://www.lyngsat.com/packages/skybrazil.html">&lt;--Lista Canais--&gt;</a></span></label></li>
<br/>
<li><label for="id_service_type_1"><input type="radio" onClick="setPrice(2500)" id="id_service_type_1" value="via" name="service_type" disabled /> Via Embromatel - (R$25,00)&nbsp;&nbsp;&nbsp;<span id="fancy" title="Via Embromatel: - StarOne C2 70W."><a target="_blank" href="http://www.lyngsat.com/packages/viaembratel.html">&lt;--Lista Canais--&gt;</a></span></label></li> 
<br/>
<li><label for="id_service_type_2"><input type="radio" onClick="setPrice(2500)" id="id_service_type_2" value="bobofonica" name="service_type" disabled /> Bobofônica - (R$25,00)&nbsp;&nbsp;&nbsp;<span id="fancy" title="Bobofônica: - Amazonas 1 61W."><a target="_blank" href="http://www.lyngsat.com/packages/telefonicabr_chno.html">&lt;--Lista Canais--&gt;</a></span></label></li>
			</ul> 
            </p> 
        </div> 

</fieldset>

<p><input class="button" id="btn_registra" type="button" value="Assinar" /></p> 

</form> 
  </div>              
</div> 